<template>
    <view class="overtrue">
        <view class="content">
            <view class="modeTextBox">
                <view class="modeText">共{{ mode===1?'支出':'入账' }}</view>
                <view class="modeValue">
                    <span style="font-size: 50rpx;">¥ </span>
                    {{  mode===1?today.monthData.cost:today.monthData.receipts }}
                </view>
            </view>
            <view class="constitute">
                <view class="constitute-text">资金构成</view>
                <view v-for="(item,index) in capitalStructure" :key="index">
                    {{ item.labelName===''?'未知':item.labelName}}:{{ Math.abs(parseFloat(item.price.toFixed(2)))}}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onHide, onLoad } from '@dcloudio/uni-app';
import type { todayType } from '@/types/bill';

////变量区
let today = ref<todayType>({
  year: 0,
  month: 0,
  day: 0,
  monthData:{
    cost:0,
    receipts:0,
  },
  paymentList: [],
});
/** 模式 */
const mode=ref<number>(1)
/** 资金结构 */
const capitalStructure=ref([])

////函数区
// 计算当月资金结构
const getCapitalStructure=()=>{
    let data=[]
    today.value.days.forEach(day=>{
        day.paymentList.forEach(bill=>{
            if(mode.value===1&&Number(bill.price)>0){
                data.push({
                    labelName:bill.label.name,
                    price:Number(bill.price)
                })
            }else if(mode.value===2&&Number(bill.price)<0){
                data.push({
                    labelName:bill.label.name,
                    price:Number(bill.price)
                })
            }
        })
    })
    const result = data.reduce((acc, curr) => {
        if (acc[curr.labelName]) {
            acc[curr.labelName].price += curr.price;
        } else {
            acc[curr.labelName] = { labelName: curr.labelName, price: curr.price };
        }
        return acc;
    }, {});
    capitalStructure.value = Object.values(result);
}


//获取数据
uni.$on('openVisual', function (data) {
  today.value = data;
  console.log("可视化",today.value )
  getCapitalStructure()
});
// 可视化模式
uni.$on('modeVisual', function (modeValue) {
    mode.value=modeValue
    getCapitalStructure()
});

onLoad(() => {
    console.log('visual Load');
});
onShow(() => {
    console.log('visual Show');
});
onHide(() => {
    console.log('visual Hide');
});
</script>

<style scoped>
.overtrue{
    position: absolute;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    background: white;
    overflow: auto;
}
.content{
    width: 88%;
    margin: 6%;
}
.modeTextBox{
    margin-bottom: 13%;
}
.modeText{
    font-size: 28rpx;
    color: rgb(58, 58, 58);
}
.modeValue{
    display: flex;
    align-items: center;
    font-size: 90rpx;
    justify-content: space-between;
    width: 230rpx;
}
.constitute{
    width: 100%;
    height: 100px;
}
.constitute-text{
    width: 100%;
    text-align: end;
    color: rgb(58, 58, 58);
}
</style>
